<template>
	<view class="detail">
		<view class="container">
			<unicloud-db v-slot:default="{data, loading, error,options}" :collection="collection" :getone="true"
				:where="`_id=='${article_id}'`">
				<view v-if="error">{{error.message}}</view>
				<view v-else-if="loading">正在加载...</view>
				<view v-else>
					<view class="title">{{data?.title}}</view>
					<view class="userinfo">
						<view class="avatar">
							<image :src="giveAvatar(data) || '../../static/images/panda.jpg'" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="name">{{getName(data)}}</view>
							<view class="small">
								<uni-dateformat :date="data?.publish_date"
									format="yyyy年MM月dd hh:mm:ss"></uni-dateformat>
								发布于{{data?.province || '火星'}}
							</view>
						</view>
					</view>
					<view class="content">
						<!-- 内容放这 -->
						<!-- <u-parse :content='data.content' :tagStyle="tagstyle"></u-parse> -->
						<uv-parse :content="data?.content" :tagStyle="tagstyle"></uv-parse>
					</view>

				</view>
			</unicloud-db>

			<view class="like">
				<view class="btn" @click="clickLike">
					<text class="iconfont icon-good-fill"></text>
					<text>{{view_click?.like_count}}</text>
				</view>
				<view class="users">
					<image src="../../static/images/user.jpg" mode="aspectFill"></image>
				</view>
				<view class="text"><text class="num">{{view_click?.view_count}}</text>人看过</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getName,
		giveAvatar
	} from "@/utils/tool.js"
	const db = uniCloud.database()
	const utilsObj = uniCloud.importObject("utilsObj", {
		customUI: true
	});

	export default {
		data() {
			return {
				article_id: '',
				tagstyle: {
					p: "line-height:1.7em;font-size:16px;padding-bottom:10rpx",
					img: "margin:10rpx 0"
				},
				collection: [
					db.collection('quanzi_article').field("user_id,title,content,province,publish_date").getTemp(),
					db.collection('uni-id-users').field("_id,nickname,avatar_file").getTemp()
				],
				view_click: null
				//field="_id,title,content,province"


			};
		},
		onLoad(e) {
			console.log("传递过来的", e)
			this.article_id = e.id;
			this.getData();
			this.readUpdate();
		},
		methods: {
			getName,
			giveAvatar,
			//联表查询获取数据
			async getData() {
				const db2 = uniCloud.database()
				const artTemp = await db2.collection('quanzi_article').where(`_id =="${this.article_id}"`).field(
					"title,like_count,view_count").get({
					getOne: true
				}).then(res => {
					console.log("----l>", res)
					this.view_click = res.result.data;
					console.log("-----------------------------------", this.view_click)

				}).catch(err => {
					console.log("ppppp->", err)
				})

			},
			//修改阅读量
			readUpdate() {
				console.log("id.....调用云端方法。。。", this.article_id)
				utilsObj.opertion("quanzi_article", "view_count", this.article_id, 1).then(res => {
					console.log("修改阅读量", res);
				}).catch(err => {
					console.log("失败了。。。。" + err)
				})
			},
			//点击点赞方法
			async clickLike() {
				let count = await db.collection("quanzi_like").where(
					`article_id=="${this.article_id}"&& user_id==$cloudEnv_uid`).count()
				console.log("点赞记录里面有：", count)
				if (count.result.total) {
					//说明已经点了赞
					console.log("点了取消赞")
					db.collection("quanzi_like").where(`article_id=="${this.article_id}" && user_id==$cloudEnv_uid`)
						.remove().then(res => {
							console.log("成功取消点赞", res).catch(err => {
								console.log("取消点赞失败", err)
							})
						})
				} else {
					console.log("点赞加一")
					db.collection("quanzi_like").add({
						article_id: this.article_id
					}).then(res => {
						console.log("成功点赞", res)
					}).catch(err => {
						console.log("失败点赞", err)
					})
				}

			}




		}
	}
</script>

<style lang="scss">
	.detail {
		background: #f8f8f8;
		min-height: calc(100vh - var(--window-top));

		.container {
			padding: 30rpx;
			background: #fff;

			.title {
				font-size: 46rpx;
				color: #333;
				line-height: 1.4em;
				font-weight: 600;
			}

			.userinfo {
				padding: 20rpx 0 50rpx;
				display: flex;
				align-items: center;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					padding-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					font-size: 28rpx;
					color: #555;

					.small {
						font-size: 20rpx;
						color: #999;
					}
				}
			}

			.content {}

			.like {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 80rpx 50rpx 50rpx;

				.btn {
					width: 260rpx;
					height: 120rpx;
					background: #e4e4e4;
					border-radius: 100rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;

					.iconfont {
						font-size: 50rpx;
					}

					&.active {
						background: #0199FE;
					}
				}

				.text {
					font-size: 26rpx;
					color: #666;

					.num {
						color: #0199FE
					}

					.spot {
						padding: 0 10rpx;
					}
				}

				.users {
					display: flex;
					justify-content: center;
					padding: 30rpx 0;

					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						border: 3px solid #fff;
						margin-left: -20rpx;
					}
				}
			}

		}
	}
</style>